{% extends "base.html" %}

{% block title %}
    Registration
{% endblock %}

{% block extrahead %}
    <script language="JavaScript" type="text/javascript">
    	var in_ajax = 0;
    	
    	//---------------------------------------------------------------------
    	// 
    	function CheckPassword() {
    		var password = document.getElementById("password").value;
    		var password_good = document.getElementById("password_good");
    		
    		if (password.length < 6) {
    			password_good.innerHTML = '<img src="/appmedia/icon-no.gif">';
    			document.getElementById("submit").disabled = true;
    		}
    		else {
    			password_good.innerHTML = '<img src="/appmedia/icon-yes.gif">';
    		}
    	}
    	
    	//---------------------------------------------------------------------
    	// 
    	function CheckPassword2() {
    		var password = document.getElementById("password").value;
    		var password2 = document.getElementById("password2").value;
    		var password_good2 = document.getElementById("password_good2");
    		
    		if (password2.length < 6) {
    			password_good2.innerHTML = '<img src="/appmedia/icon-no.gif">';
    			document.getElementById("submit").disabled = true;
    			return;
    		}
    		
    		if (password2 != password) {
    			password_good2.innerHTML = '<img src="/appmedia/icon-no.gif">';
    			document.getElementById("submit").disabled = true;
    			
    		}
    		else {
    			password_good2.innerHTML = '<img src="/appmedia/icon-yes.gif">';
				document.getElementById("submit").disabled = false;
    		}
    		
    		var i_agree = document.getElementById("i_agree");
    		
    		if (i_agree.checked == false) {
    			document.getElementById("submit").disabled = true;
    		}
    	}
    	
    	//---------------------------------------------------------------------
    	// 
    	function Register() {
    		document.getElementById("Registration").submit();
    	}
    	
    	//---------------------------------------------------------------------
    	// 
    	function check_login() {
			new_login = $("#id_username").val();
			if (new_login == "") {
				$("#login_status").html("<b style='color:blue'>Please, type in your login</b>");
				return;
			}
			$.post("/check_login/", {"login": new_login}, function(data){$("#login_status").html(data);});
		}
    </script>
    
    <style>
    td {
    	vertical-align:middle;
    	padding-top:10px;
    }
    </style>
{% endblock %}

{% block content %}
	<h1 class="about_header">Registration</h1>
	
	<p class="about help_text" style="font-size:12px">
		{{ motivation|escape }} 
		<span class="light">
			{% if motivation.author %}
				{{ motivation.author }}
			{% else %}
				Unknown author
			{% endif %}
		</span>
	</p>
	
	<h2>{{error_message}}</h2>
	
	<form id="Registration" action="/registration/" method="post">
					    <table>
					        <tr>
					            <td>
					                Choose a Username:					                
					            </td>
					            <td> 
					                <input type="text" id="id_username" name="username" style="width:300px;padding:5px;" />
					                <br />
					                <a href="javascript:check_login()">Check availability!&nbsp;&nbsp;&nbsp;&nbsp;</a>
					                <div id="login_status" style="display:inline">
									</div>
					            </td>
					            <td>
					            	<div id="username_good"></div>
					            </td>
					            <td>
					            	<span style="color:#aaaaaa">Use alphanumeric characters only (letters, digits and underscores).</span>
					            </td>
					        </tr>
					        <tr>
					            <td>
					                 Choose a password:
					            </td>
					            <td> 
					                <input type="password" id="password" name="password" style="width:300px;padding:5px;" onkeyup="CheckPassword()"/>
					            </td>
					            <td width="12">
					            	<div id="password_good"></div>
					            </td>
					            <td>
					            	 <span style="color:#aaaaaa">Password must be more than 6 characters in length.</span>
					            </td>
					        </tr>
					        <tr>
					            <td>
					                 Type password again:
					            </td>
					            <td> 
					                <input type="password" id="password2" name="password2" style="width:300px;padding:5px;" onkeyup="CheckPassword2()" />
					            </td>
					            <td>
					            	<div id="password_good2"></div>
					            </td>
					            <td>
					            </td>
					        </tr>
					        <tr>    
					            <td style="vertical-align:top;">
					            	Agree to the Terms of Service:
					            </td>
					            <td>
					            	<input id="i_agree" type="checkbox" class="checkbox" onclick="CheckPassword2()">
					            	Yes, I agree to the Getting tasks done <a target="blank" href="/terms/">Terms of Service</a>.
					            	</input>
					            </td>
					        </tr>
					        <tr>
					            <td colspan="4">
					            	<p>
					            	<input id="submit" type="submit" class="submit" style="width:180px" value="I accept. Create account." />
					            	
					            </td>
					        </tr>
					    </table>
					    </form>
		
    <script type="text/javascript">
        document.getElementById('id_username').focus();
        document.getElementById("submit").disabled = true;
    </script>
{% endblock %}
